AWS Cloud9 上で起動した Vite の開発サーバーをプレビューする
2024.01.04こんにちは、CX 事業本部 Delivery 部の若槻です。
Vite は、フロントエンドアプリケーションの高速なビルドや開発サーバーの実行を可能にする開発環境を提供するツールです。
今回は、クラウド上で利用できる IDE を簡単に構築できる AWS Cloud9 上で Vite の開発サーバーを起動してプレビューしてみました。
試してみた
Cloud9 環境の作成
AWS Cloud9 の環境を作成します。今回は以下の設定で作成しました。
- 接続タイプ：AWS Systems Manager (SSM)
- インスタンスタイプ：t2.micro
- プラットフォーム：Amazon Linux 2023
また環境の作成は下記を参考に AWS CDK で行いました。
コンソールから手動で作成する場合は下記を参考にしてください。
作成した Cloud9 環境の IDE に接続できました。
Vite プロジェクトの作成
Vite の Getting Started を参考に、Vite プロジェクトを作成します。一旦次の設定で作成しました。
- パッケージ管理ツール：npm
- フレームワーク：Vanilla
- バリアント：TypeScript
$ npm create vite@latest -y ✔ Project name: … vite-project ✔ Select a framework: › Vanilla ✔ Select a variant: › TypeScript Scaffolding project in /home/ec2-user/environment/vite-project... Done. Now run: cd vite-project npm install npm run dev
作成したプロジェクトに移動して、依存関係をインストールします。
cd vite-project npm install
Vite 開発サーバーの起動
Vite の開発サーバーを起動して、フロントエンドのプレビューを表示してみます。
npm run dev コマンドを実行します。
トップメニューの Preview > Preview Running Application をクリックします。
すると通知モーダルが表示され、アプリケーションのプレビュー表示も失敗しています。
仮想ファイルシステム（VFS：Virtual File System）への接続が存在しないとのことです。
Oops
VFS connection does not exist
通知モーダルによると、サードパーティークッキーが許可されていないため、許可する必要があるとのことです。
Third-party cookies disabled
You can't access preview functionality because your browser blocks third-party cookies (also known as cross-site tracking). To use previews, allow third-party cookies and reload your IDE.
AWS Cloud9 のドキュメントを見ると、各種ブラウザのサードパーティクッキーの許可方法が紹介されています。
今回使用していたブラウザは Safari です。Safari の場合は Settings > Privacy > Website tracking の Prevent cross-site tracking のチェックを外します。
サードパーティクッキーの許可後に再度サーバーを起動してプレビューを表示すると、今度はアプリケーションが起動していない旨のエラーが表示されました。
Oops
No application seems to be running here!
AWS Cloud9 のドキュメントを再度見ると、プレビューに使用できるポート番号および IP アドレスには以下の制限があるとのことです。
Before you can preview your application from within the IDE, your application must be running in the AWS Cloud9 development environment. It must use HTTP over the following ports:
- 8080
- 8081
- 8082
All of the above ports must use the IP address of
127.0.0.1localhost, or0.0.0.0.
vite.config.js を作成して次のように記述します。ポート番号 8080 を使用するように変更しています。
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 8080
}
})
再度サーバーを起動すると、今度はプレビューを正常に表示できました。
ちなみにこのときのプレビューの URL は次のようになっていました。
https://< EnvironmentID >.vfs.cloud9.ap-northeast-1.amazonaws.com/
ここまでのプレビューの表示は IDE 内での表示でしたが、外部のブラウザからもプレビューを表示できます。プレビュー右上のリンクボタンをクリックします。
すると前述と同じ URL でプレビューが表示できました。
ちなみにこのプレビューの表示は、インバウンドアクセスが許可されているわけではなく、サードパーティクッキーにより実現されています。そのためブラウザの設定によってはプレビューが正常に行われないという挙動が発生します。
その他
ポート番号を指定する別の方法
サーバー起動時のポート番号の指定は --port オプションでも可能です。
次のように実行します。
npm run dev -- --port 8080
ディスクサイズの拡張
Cloud9 環境の既定のディスクサイズは 10GB です。Vite プロジェクトを今回の設定で作成した場合、そのうちの約 70% が使用されます。
$ df -h Filesystem Size Used Avail Use% Mounted on devtmpfs 4.0M 0 4.0M 0% /dev tmpfs 3.9G 0 3.9G 0% /dev/shm tmpfs 1.6G 8.5M 1.6G 1% /run /dev/xvda1 10G 7.0G 3.1G 70% / tmpfs 3.9G 0 3.9G 0% /tmp /dev/xvda128 10M 1.3M 8.7M 13% /boot/efi tmpfs 794M 0 794M 0% /run/user/1000
ディスクサイズが不足する場合は次で紹介している方法で簡単にサイズを拡張できます。
おわりに
AWS Cloud9 上で起動した Vite の開発サーバーをプレビューする方法をご紹介しました。
AWS Samples などにある Getting Started で AWS Cloud9 環境を使用する際に、Vite を使用する手順もあるので、その場合のアプリケーションのプレビュー方法を改めて確認してみました。どなたかの参考になれば幸いです。
以上
